<html>

<body>
    <h1>Mountains</h1>
    <div id="mountains"></div>
    <div id="mountains" onload="create()">
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        const MOUNTAINS = [{
            name: "Mont Blanc",
            height: 4808,
            place: "Italy/France"
        }, {
            name: "Popocatepetl",
            height: 5465,
            place: "Mexico"
        }];
        $(document).ready(function() {
            let str = "<table border='1px'>"
            MOUNTAINS.forEach((item) => {
                str += "<tr><td>" + item.name + "</td><td>" + item.height + "</td><td>" + item.place + "</td>"
            })
            str += "</table>"
            $("body").append(str);

        });
    </script>
</body>

</html>




<html>

<body>
    <h1>Mountains</h1>
    <div id="mountains"></div>
    <div id="mountains" onload="create()">
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            $.get("data.json", function(data) {


                let str = "<table border='1px'>"
                data.forEach((item) => {
                    str += "<tr><td>" + item.name + "</td><td>" + item.height + "</td><td>" + item.place + "</td>"
                })
                str += "</table>";
                $("body").append(str);

            });
        });
    </script>
</body>

</html>